import { Card, Spin, Typography } from 'antd';
import React from 'react';
import type { TotalAnalyticChartsData } from '../data.d';
import styles from '../style.less';
import { Line } from '@ant-design/plots';

const { Text } = Typography;

const ProportionSales = ({
  loading,
  visitData,
}: {
  loading: boolean;
  visitData: TotalAnalyticChartsData;
}) => {
  const smsClickConfig = {
    data: visitData?.click_charts?.lines,
    xField: 'key',
    yField: 'value',
    height: 300,
    xAxis: {
      tickCount: 5,
    },
    point: {
      size: 5,
      shape: 'diamond',
    },
    meta: {
      // year: {
      //   type: 'time',
      // },
      value: {
        alias: '次数',
      },
    },
  };

  return (
    <Card
      loading={loading}
      className={styles.salesCard}
      bordered={false}
      title="72小时点击情况"
      style={{
        height: '100%',
      }}
      // extra={
      //   <div className={styles.salesCardExtra}>
      //     {dropdownGroup}
      //     <div className={styles.salesTypeRadio}>
      //       <Radio.Group value={salesType} onChange={handleChangeSalesType}>
      //         <Radio.Button value="all">全部渠道</Radio.Button>
      //         <Radio.Button value="online">线上</Radio.Button>
      //         <Radio.Button value="stores">门店</Radio.Button>
      //       </Radio.Group>
      //     </div>
      //   </div>
      // }
    >
      <div>
        <Text>点击</Text>
        <Spin spinning={loading} tip="加载中">
          <Line {...smsClickConfig} />
        </Spin>
        {/* <Donut
          forceFit
          height={340}
          radius={0.8}
          angleField="y"
          colorField="x"
          data={salesPieData as any}
          legend={{
            visible: false,
          }}
          label={{
            visible: true,
            type: 'spider',
            formatter: (text, item) => {
              // eslint-disable-next-line no-underscore-dangle
              return `${item._origin.x}: ${numeral(item._origin.y).format('0,0')}`;
            },
          }}
          statistic={
            {
              totalLabel: '转化率',
            } as DonutConfig['statistic']
          }
        /> */}
      </div>
    </Card>
  );
};

export default ProportionSales;
